<!--
 * @FilePath     : /layui/demo/1581.html
 * @Description  : 下拉树结构
 * @Date         : 2025-02-25 10:24
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-02-25 10:29
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <div id="demo1" class="xm-select-demo"></div>

    <br />
    <div class="layui-form">
      <input
        type="checkbox"
        name="showFolderIcon"
        lay-filter="showFolderIcon"
        lay-skin="primary"
        title="是否展示三角图标"
        checked
      />
      <input
        type="checkbox"
        name="showLine"
        lay-filter="showLine"
        lay-skin="primary"
        title="是否显示虚线"
        checked
      />
      <input
        type="checkbox"
        name="strict"
        lay-filter="strict"
        lay-skin="primary"
        title="严格父子结构"
        checked
      />
      <input
        type="checkbox"
        name="simple"
        lay-filter="simple"
        lay-skin="primary"
        title="极简模式"
      />

      <br />
      <br />
      <input
        type="checkbox"
        name="hidden"
        lay-filter="hidden"
        lay-skin="primary"
        title="隐藏父节点图标"
      />
      <input
        type="checkbox"
        name="custom"
        lay-filter="custom"
        lay-skin="primary"
        title="自定义图标"
      />
      <input type="checkbox" name="all" lay-filter="all" lay-skin="primary" title="展开所有节点" />
      <input
        type="checkbox"
        name="close"
        lay-filter="close"
        lay-skin="primary"
        title="闭合所有节点"
      />
      <input
        type="checkbox"
        name="key3"
        lay-filter="key3"
        lay-skin="primary"
        title="展开指定节点"
      />

      <br />
      <br />
      <input
        type="checkbox"
        name="clickExpand"
        lay-filter="clickExpand"
        lay-skin="primary"
        title="clickExpand"
        checked
      />
      <input
        type="checkbox"
        name="clickCheck"
        lay-filter="clickCheck"
        lay-skin="primary"
        title="clickExpand"
        checked
      />
    </div>

    <div style="margin-top: 20px">间距</div>
    <div id="slideTest1"></div>

    <script src="/layui/dist/layui.js"></script>
    <script src="/xm-select/dist/xm-select.js"></script>
    <script>
      layui.form.render()

      //
      const listArr = ['showFolderIcon', 'showLine', 'strict', 'simple']
      listArr.forEach(function (key) {
        layui.form.on('checkbox(' + key + ')', function (data) {
          var treeConfig = {}
          treeConfig[key] = data.elem.checked
          demo1.update({
            tree: treeConfig,
          })
        })
      })

      //控制显示父节点的图标
      layui.form.on('checkbox(hidden)', function (data) {
        demo1.update({
          iconfont: {
            parent: data.elem.checked ? 'hidden' : '',
          },
        })
      })

      //自定义图标
      layui.form.on('checkbox(custom)', function (data) {
        let iconfont = data.elem.checked
          ? {
              select: 'layui-icon layui-icon-chart',
              unselect: 'layui-icon-ok-circle',
              half: 'layui-icon layui-icon-table',
              parent: 'layui-icon layui-icon-survey',
            }
          : {
              select: '',
              unselect: '',
              half: '',
              parent: '',
            }
        demo1.update({
          iconfont: iconfont,
        })
        layui.form.render()
      })

      //展开所有节点
      layui.form.on('checkbox(all)', function (data) {
        if (data.elem.checked) {
          demo1.changeExpandedKeys(true)
        }
      })

      //闭合所有节点
      layui.form.on('checkbox(close)', function (data) {
        if (data.elem.checked) {
          demo1.changeExpandedKeys(false)
        }
      })

      //展开指定节点
      layui.form.on('checkbox(key3)', function (data) {
        if (data.elem.checked) {
          demo1.changeExpandedKeys([-3])
        }
      })

      layui.form.on('checkbox(clickExpand)', function (data) {
        demo1.update({
          tree: {
            clickExpand: data.elem.checked,
          },
        })
      })

      layui.form.on('checkbox(clickCheck)', function (data) {
        demo1.update({
          tree: {
            clickCheck: data.elem.checked,
          },
        })
      })

      layui.slider.render({
        elem: '#slideTest1',
        min: 10,
        max: 100,
        showstep: true,
        input: true,
        tips: true,
        value: 20,
        change: function (value) {
          demo1.update({
            tree: {
              indent: value,
            },
          })
        },
      })

      var demo1 = xmSelect.render({
        el: '#demo1',
        autoRow: true,
        filterable: true,
        // 树配置
        tree: {
          show: true,
          showFolderIcon: true,
          showLine: true,
          indent: 20,
          expandedKeys: [-3],
        },
        toolbar: {
          show: true,
          list: ['ALL', 'REVERSE', 'CLEAR'],
        },
        filterable: true,
        height: 'auto',
        data: function () {
          return [
            {
              name: '销售员',
              value: -1,
              disabled: true,
              children: [
                { name: '张三1', value: 1, selected: true, children: [] },
                { name: '李四1', value: 2, selected: true },
                { name: '王五1', value: 3, disabled: true },
              ],
            },
            {
              name: '奖品',
              value: -2,
              children: [
                {
                  name: '奖品3',
                  value: -3,
                  children: [
                    { name: '苹果3', value: 14, selected: true },
                    { name: '香蕉3', value: 15 },
                    { name: '葡萄3', value: 16 },
                  ],
                },
                { name: '苹果2', value: 4, selected: true, disabled: true },
                { name: '香蕉2', value: 5 },
                { name: '葡萄2', value: 6 },
              ],
            },
          ]
        },
      })
    </script>
  </body>
</html>
